<template>
	<view class="content"  >
		<view class="head">
			<view class="search">
				<!-- <view class="icon">
					<text class="cuIcon-search"></text>
				</view>
				<view class="input">
					<input type="text" placeholder="输入搜索关键字" v-model="key" />
				</view>
				<view class="search-tip">
					<text>搜索</text>
				</view> -->
				<view class="nav-item" v-for="(i,j) in menuList" :key="j" @click="check(j)" :class="currentIndex == j?'active':''">
					<text>{{i}}</text>
				</view>
			</view>
		</view>
		<view class="section">
			<!-- 如果列表没有数据 -->
			<Null v-if="list.length == 0"></Null>
			<view class="list">
				<template v-if="false">
					<view class="tip">
						<view>
							<text style="margin-right: 10rpx;" class="cuIcon-notification"></text>
							<text>小提示:右滑动可以发起保修单哦~</text>
						</view>
					</view>
					<view style="height: 60rpx;"></view>
				</template>
				
				<view class="item" @tap="toPage(i.id)" v-for="(i,j) in list" :key="j" v-if="i.is_delete == 0">
					<view class="msg">
						<view style="display: flex; justify-content: space-between;">
							<text>
								<text class="msg-title">类型</text>
								<text>{{i.orderServiceType.title}}</text>
							</text>
							<!-- 状态判断 -->
							<!-- 进行中 -->
							<text v-if="i.status == 0" style="color: #ffa23e;">
								<text class="cuIcon-title"></text>
								<text>未完成</text>
							</text>
							<!-- 已结束 -->
							<text v-if="i.status == 1" style="color: #39B54A;">
								<text class="cuIcon-title"></text>
								<text>已完成</text>
							</text>
						</view>
						<view>
							<text style="color: #333333; font-size: 24rpx;" >
								<text class="msg-title">地点</text>
								<text style="margin-left: 10rpx;">{{i.address}}</text>
							</text>
						</view>
						<view>
							<text style="color: #333333; font-size: 24rpx;" >
								<text class="msg-title">组员人数</text>
								<text style="margin-left: 10rpx;">{{i.orderServiceUser.length}}人</text>
							</text>
						</view>
						<view>
							<text style="color: #333; font-size: 24rpx;" >
								<text class="msg-title">施工内容</text>
								<text style="margin-left: 10rpx">{{i.title}}</text>
							</text>
						</view>
						<view class="time">
							<text></text>
							<text style="font-size: 24rpx; color: #AAAAAA;">{{i.create_time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	    <!-- 右下角功能图标 -->
		<!-- <Icon url="./toworkadd/toworkadd"></Icon> -->
		<!-- 侧边栏 -->
		<view class="cu-modal drawer-modal justify-start" :class="leftShow?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
				<view class="cu-list menu text-left">
					<view class="cu-item arrow" v-for="(item,index) in leftMenu" v-if="item.isShow" @tap="fLeftMenu(item)" :key="index">
						<view class="content">
							<view>{{item.title}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import Icon from "../../../components/common/icon.vue"
	import api from "../../../network/index.js"
	import Null from "../../../components/common/null.vue"
	export default {
		data() {
			return {
				// 分页信息
				current_page: 1, // 当前页
				last_page: 0, // 最后一页
				per_page: 5, // 每页条数
				// tab切换栏
				menuList:['待完成','已完成','全部'],
				currentIndex: 0,
				list:[], // 维保类型, 维保地点, 组员人数, 施工状态, 时间, 维保服务费,
				leftShow: false,
				// 左侧弹窗菜单
				leftMenu: [
					{
						name: 'install',
						title: '安装跟踪',
						isShow: true
					},
					{
						name: 'uninstall',
						title: '拆卸跟踪',
						isShow: true
					},
					{
						name: 'repair',
						title: '发起维修',
						isShow: true
					},
					{
						name: 'rent',
						title: '配件转借',
						isShow: true
					},
				],
			}
		},
		components:{
			Icon,
			Null
		},
		computed:{
			status(){
				// this.projectList = []
				if(this.currentIndex == 0)return 0
				if(this.currentIndex == 1)return 1
				// if(this.currentIndex == 3)return ''
			}
		},
		methods: {
			// 监听左侧菜单功能
			fLeftMenu(i){
				if(i.name=="rent"){
					uni.navigateTo({
						url: "./toworkrent/toworkrent"
					})
					return
				}
				uni.navigateTo({
					url: "./toworkadd/toworkadd?type="+i.name
				})
			},
			// 监听手势滑动-弹出测边框
			tStart(e){
				this.startX = e.changedTouches[0].pageX
			},
			tMove(){
				// console.log('移动')
			},
			hideModal(){
				this.leftShow = false
			},
			tEnd(e){
				this.endX = e.changedTouches[0].pageX
				let move = this.endX - this.startX
				if(move>40){
					this.leftShow = true
				}
			},
			// 切换tab栏目
			check(index){
				if(index==this.currentIndex)return
				this.init()
				this.currentIndex = index
				this.getList()
			},
			// 初始化列表
			init(){
				this.list = []
				this.current_page = 1,
				this.last_page = 0
			},
			// 跳转至维保详情页面
			toPage(id){
				uni.navigateTo({
					url: "./toworkdetail/toworkdetail?id="+id
				})
			},
			// 获取列表
			getList(){
				const t = this
				let data = {
					status: "=,"+this.status,
					page: this.current_page,
					list_rows: this.per_page,
					sort: "create_time:desc"
				}
				if(this.currentIndex == 2){
					delete data.status
				}
				api.request({
					url: api.SERVICE_LIST,
					data: data
				}).then(res=>{
					if(res.data.code == "200"){
						// 如果没数据返回空
						if(res.data.list == "暂无数据") return this.list = []
						// 如果有数据初始化页数
						this.current_page = res.data.list.current_page
						this.last_page = res.data.list.last_page
						this.list =this.list.concat(res.data.list.data) 
						// console.log(res)
					} else {
						api.error(res)
					}
				}).catch(err=>{
					api.error(err)
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh (){
			setTimeout(()=>{
				this.init()
				this.getList()
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.current_page == this.last_page){
				return
			}
			this.current_page++
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.msg-title{
		margin-right: 20rpx;
		font-size: 28rpx;
	    color: #333333; 
		font-weight: 600;
	}
	*{
		box-sizing: border-box;
	}
	.section{
		padding-top: 73rpx;
	}
	.list{
		// overflow: hidden;
		position: relative;
		.tip{
			position: fixed;
			text-align: center;
			// top: 100rpx;
			height: 80rpx;
			line-height: 80rpx;
			left: 0rpx;
			right: 0rpx;
			color: #FFFFFF;
			background-color: #FFFFFF;
			z-index: 100;
			view{
				height: 40rpx;
				line-height: 40rpx;
				margin: 0 100rpx;
				margin-top: 20rpx;
				border-radius: 20rpx;
				background-color: #ffa23e;
			}
			box-shadow: 4rpx 4rpx 8rpx #EEEEEE;
		}
		.item{
			display: flex;
			margin: 30rpx 20rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			box-shadow: 2rpx 2rpx 4rx #EEEEEE;
			border-left: 1rpx solid #ffa23e;
			box-sizing: border-box;
			.photo{
				image{
					width: 200rpx;
					height: 200rpx;
				}
			}
			.msg{
				padding: 0 20rpx;
				padding-top: 10rpx;
				flex: 1;
				view{
					// height: 54rpx;
					line-height: 54rpx;
				}
				.time{
					display: flex;
					justify-content: space-between;
				}
			}
			
		}
	}
	.search{
		position: fixed;
		z-index: 100;
		left: 0;
		right: 0;
		margin: 0 0 10rpx;
		display: flex;
		justify-content: space-around;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
		box-shadow: 2rpx 2rpx 8rpx #EEEEEE;
		// padding-top: 15rpx;
		.nav-item{
			flex: 1;
			text-align: center;
		}
		.search-tip,.icon{
			font-size: 28rpx;
			color: #333333;
			width: 140rpx;
			text-align: center;
		}
		.input{
			flex: 1;
			// background-color: #F5F5F5;
			input{
				padding: 0 10rpx;
				font-size: 28rpx;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
			}
		}
	}
	.active{
		background-color: #F5F5F5;
		color: #ffa23e;
		border-bottom: 1rpx solid #ffa23e;
	}
</style>
